/*
 * @Author: kakay
 * @Date: 2017-08-15 18:33:46
 * */


import React, { Component } from 'react';
import { NavBar, Flex, Switch, Button, InputItem, Toast, TextareaItem, DatePicker } from 'antd-mobile';
import { Resource } from '../../../service/resource';
import BrowserUtils from '../../../service/history';
import './index.scss';
import moment from 'moment';

export default class AddProject extends Component {
  constructor(props) {
    super(props);
    const info = props.location.state && props.location.state.info;
    const NavBarName = props.location.state && props.location.state.NavBarName;
    this.state = {
      info: {
        name: '',
        start: '',
        end: '',
        describe: '',
        state: 0,
        ...info
      },
      visibleS: false,
      visibleE: false,
      dpValueS: info && moment(info.start, 'YYYY-MM-DD').utcOffset(8),
      dpValueE: info && moment(info.end, 'YYYY-MM-DD').utcOffset(8),

      NavBarName: NavBarName || ''
    }
  }

  componentDidMount() {
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.location.state && nextProps.location.state.NavBarName) {
      this.setState({NavBarName: nextProps.location.state.NavBarName});
    }
    if (nextProps.location.state && nextProps.location.state.info) {
      const info = nextProps.location.state.info;
      this.setState({
        info: nextProps.location.state.info,
        visibleS: false,
        visibleE: false,
        dpValueS: moment(info.start, 'YYYY-MM-DD').utcOffset(8),
        dpValueE: moment(info.end, 'YYYY-MM-DD').utcOffset(8),
      });
    } else {
      this.setState({
        info: {
          name: '',
          start: '',
          end: '',
          describe: '',
          state: 0
        },
        visibleS: false,
        visibleE: false,
        dpValueS: null,
        dpValueE: null
      });
    }
  }

  onTouchTapBack() {
    BrowserUtils.goBack();
    this.setState({NavBarName: ""});
  }

  workload(info){
    BrowserUtils.push({pathname: '/workload', state: {info: info}});
  }

  editInfo(value, type) {
    const { info } = this.state;
    if (type === 'name') info.name = value;
    if (type === 'start') info.start = value;
    if (type === 'end') info.end = value;
    if (type === 'state') info.state = !value ? 0 : 1;
    if (type === 'describe') info.describe = value;
    this.setState({info});
  }

  updateProject() {
    const {info} = this.state;
    if(info.status){
      Resource.updateProject.post(null, info).then(res => {
        if(res && res.result === 1) {
          Toast.success('修改成功', 2);
          this.onTouchTapBack();
        } else if (res.result === 0) {
          Toast.fail('修改失败', 2);
        }
      }).catch(err => {
        Toast.fail('修改失败', 2);
        console.log(err);
      })
    }else{
      Resource.addProject.post(null, info).then(res => {
        if(res && res.result === 1) {
          Toast.success('添加成功', 2);
          this.onTouchTapBack();
        } else if (res.result === 0) {
          Toast.fail('添加失败', 2);
        }
      }).catch(err => {
        Toast.fail('添加失败', 2);
        console.log(err);
      })
    }
  }

  delectProject (){
    const {info} = this.state;
    Resource.deleteProject.post({id:info.id}).then(res => {
      if(res && res.result === 1) {
        Toast.success('删除成功', 2);
        this.onTouchTapBack();
      } else if (res.result === 0) {
        Toast.fail('删除失败', 2);
      }
    }).catch(err => {
      Toast.fail('删除失败', 2);
      console.log(err);
    })
  }


  render() {
    const { info, dpValueS, dpValueE ,NavBarName} = this.state;
    console.log(NavBarName)
    return (
      <Flex className="addProject" direction="column" align="start" style={{display: this.props.display}}>
        <Flex className="content" direction="column" align="center">
          <NavBar
            mode="dark"
            className="am-tab-bar-bar"
            style={{top: 0}}
            onLeftClick={() => this.onTouchTapBack()}
            rightContent={[
              <div key="0" onClick={() => this.workload(info)}>{NavBarName}</div>
            ]}
            >
            {(info.status ? info.status : '添加') + '项目'}
          </NavBar>
          <Flex className="inputItem" justify="between">
            <Flex.Item className="label">项目：</Flex.Item>
            <InputItem
              className="input"
              value={info.name}
              clear
              placeholder="请输入项目名称"
              onChange={value => this.editInfo(value, 'name')}
              />
          </Flex>
          <Flex className="inputItem" justify="between">
            <Flex.Item className="label">开始时间：</Flex.Item>
            <InputItem
              className="input"
              value={info.start}
              clear
              editable={false}
              placeholder="开始时间"
              onChange={value => this.editInfo(value, 'start')}
              onClick={() => this.setState({ visibleS: true })}
              />
            <DatePicker
              visible={this.state.visibleS}
              mode="date"
              maxDate={dpValueE}
              onOk={() => console.log('onOk')}
              onDismiss={() => this.setState({ visibleS: false })}
              value={dpValueS}
              onChange={v => this.setState({ dpValueS: v, info: { ...info, start: v.format('YYYY-MM-DD') }, visibleS: false })}
            />
          </Flex>
          <Flex className="inputItem" justify="between">
            <Flex.Item className="label">结束时间：</Flex.Item>
            <InputItem
              className="input"
              value={info.end}
              clear
              editable={false}
              placeholder="结束时间"
              onChange={value => this.editInfo(value, 'end')}
              onClick={() => this.setState({ visibleE: true })}
            />
            <DatePicker
              visible={this.state.visibleE}
              mode="date"
              minDate={dpValueS}
              onOk={() => console.log('onOk')}
              onDismiss={() => this.setState({ visibleE: false })}
              value={dpValueE}
              onChange={v => this.setState({ dpValueE: v, info: { ...info, end: v.format('YYYY-MM-DD') }, visibleE: false })}
            />
          </Flex>
          <Flex className="inputItem" justify="between">
            <Flex.Item className="label">描述：</Flex.Item>
            <TextareaItem
              className="input"
              rows={4}
              value={info.describe || ''}
              placeholder="描述"
              onChange={value => this.editInfo(value, 'describe')}
            />
          </Flex>
          <Flex className="inputItem" justify="start">
            <label className="label">是否结束：</label>
            <Switch checked={info.state === 0 ? false : true} onChange={checked => this.editInfo(checked, 'state')}/>
          </Flex>
          <Flex className="inputItem" justify="around">
            <Button className="btn" type="primary" onTouchTap={() => this.updateProject()}>
              {info.status?info.status:"提交"}
            </Button>
            { 
              info.status &&
              <Button className="btn" type="warning" onTouchTap={() => this.delectProject()}>
                删除
              </Button>
            }
          </Flex>
        </Flex>
      </Flex>
    );
  }
}
